<!doctype html>
<html lang="zh-CN">
<head>
    <script src="./js/base/templet.js"></script>
    <script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

    <style>
        .navbar-brand > img {
            display: inline;
        }
    </style>
    <style>
        .media {
            padding: 3px;
            border: 1px solid #ccc
        }
    </style>
</head>
<body>
<div id="app">

    <com_head></com_head>
    <!--内容-->
    <div class="container" style="margin-top:120px">
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title"><span class="glyphicon glyphicon-plus"></span>&nbsp;会员注册</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" onsubmit="return toSubmit()">
                            <fieldset>
                                <div class="form-group">
                                    <label for="input_name"><span
                                                class="glyphicon glyphicon-user"></span>&nbsp;昵称</label>
                                    <input id="input_name" name="name" class="form-control input-lg" placeholder="昵称"
                                           required
                                           v-model="regForm.name"
                                           type="text">
                                </div>

                                <div class="form-group">
                                    <label for="input_email"><span
                                                class="glyphicon glyphicon-envelope"></span>&nbsp;邮箱</label>
                                    <input id="input_email" class="form-control input-lg" placeholder="邮箱" required
                                           v-model="regForm.email"
                                           type="email">
                                </div>

                                <div class="form-group">
                                    <label for="input_phone"><span
                                                class="glyphicon glyphicon-phone"></span>&nbsp;手机</label>
                                    <input id="input_phone" class="form-control input-lg" placeholder="手机" required
                                           v-model="regForm.phone"
                                           type="text">
                                </div>

                                <div class="form-group">
                                    <label for="input_password"><span
                                                class="glyphicon glyphicon-lock"></span>&nbsp;密码</label>
                                    <input id="input_password" class="form-control input-lg" placeholder="密码" required
                                           v-model="regForm.password" type="password" value="">
                                </div>

                                <div class="form-group">
                                    <label for="input_repassword"><span
                                                class="glyphicon glyphicon-lock"></span>&nbsp;确认密码</label>
                                    <input id="input_repassword" class="form-control input-lg" placeholder="确认密码"
                                           required
                                           v-model="regForm.repassword" type="password" value="">
                                </div>
                                <div v-if="okd.flag" class="alert alert-success alert-dismissible">
                                    <button type="button" class="close" aria-hidden="true" @click="okd.flag=false">×
                                    </button>
                                    <h4><i class="icon fa fa-check"></i> 通知!</h4>
                                    {{okd.msg}}
                                </div>

                                <div v-if="err.flag" class="alert alert-warning alert-dismissible">
                                    <button type="button" class="close" aria-hidden="true" @click="err.flag=false">×
                                    </button>
                                    <h4><i class="icon fa fa-warning"></i> 通知!</h4>
                                    {{err.msg}}
                                </div>
                                <br>
                                <input class="btn btn-lg btn-success btn-block" id="submit" name="submit" type="submit"
                                       value="注册">
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <com_foot></com_foot>

</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            okd: {
                flag: false,
                msg: ""
            },
            err: {
                flag: false,
                msg: ""
            },
            regForm: {
                name: '',
                password: '',
                repassword: '',
                phone: '',
                email: ''
            }
        },
        components: {
            "com_head": com_head,
            "com_foot": com_foot
        },
        created() {
            $(function () {
                new WOW().init();
            })
            $(document).ready(function () {
                $("img.lazy").lazyload({
                    effect: "fadeIn"
                });
            });
        },
        methods: {
            // 表单提交
            submit() {
                register(this.regForm).then(res => {
                    if (400 == res.data.code) {
                        this.err.flag = true
                        this.err.msg = res.data.msg
                    } else {
                        this.okd.flag = true
                        this.okd.msg = "正在登录"
                        login(this.regForm).then(res => {
                            if (400 == res.data.code) {
                                this.okd.flag = false
                                this.err.flag = true
                                this.err.msg = res.data.msg
                            } else {
                                sessionStorage.setItem("user", JSON.stringify(res.data.data))
                                sessionStorage.setItem("name",res.data.data.name)
                                window.location = "/"
                            }
                        })
                    }
                })
            }
        }
    })

    // 阻止表单默认提交事件
    function toSubmit() {
        vm.submit()
        return false
    }

</script>
</body>
</html>
